<template>
  <!--  安全检测成效评价配置-->
  <div style="width: 100%; padding: 0 20px">
    <div class="operate">
      <div>
        <a-select
            style="width: 9vw;"
            v-model="orgId"
        >
          <a-select-option
              v-for="(item, index) in this.orgList"
              :value="item.dictKey"
              :key="index"
          >{{ item.dictValue }}</a-select-option
          >
        </a-select>
      </div>
      <div>
        <ep-button
            icon="edit.svg"
            size="small"
            type="primary"
            @click="save"
        >保存
        </ep-button>
      </div>
    </div>
    <ul class="media-wrap" v-if="orgId==='330300000000'">
      <li>
        <div class="item special">
          <div class="desc"></div>
        </div>
        <div class="item">
          <div class="desc">检测覆盖度(W21)</div>
        </div>
        <div class="item">
          <div class="desc">巡查及时性(W22)</div>
        </div>
        <div class="item">
          <div class="desc">隐患处置及时性(W23)</div>
        </div>
        <div class="item">
          <div class="desc">办案打击力度(W24)</div>
        </div>
        <div class="item">
          <div class="desc">合计(W2)</div>
        </div>
      </li>
      <li v-for="(item, index) in datasForParent" :key="index">
        <div class="item special">
          <div class="desc">{{ item.effEva01.value }}</div>
        </div>
        <div class="item">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="item.effEva02.value" @change="changeValue(index,'effEva02',$event)" :disabled="item.effEva02.disabled">
          <div class="suffix">
            {{ item.effEva02.percentage }}
          </div>
        </div>
        <div class="item">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="item.effEva03.value" @change="changeValue(index,'effEva03',$event)"  :disabled="item.effEva03.disabled">
          <div class="suffix">
            {{ item.effEva03.percentage }}
          </div>
        </div>
        <div class="item">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="item.effEva04.value" @change="changeValue(index,'effEva04',$event)"  :disabled="item.effEva04.disabled">
          <div class="suffix">
            {{ item.effEva04.percentage }}
          </div>
        </div>
        <div class="item">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="item.effEva05.value" @change="changeValue(index,'effEva05',$event)"  :disabled="item.effEva05.disabled">
          <div class="suffix">
            {{ item.effEva05.percentage }}
          </div>
        </div>
        <div class="item">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="item.effEva06.value" @change="changeValue(index,'effEva06',$event)"  :disabled="item.effEva06.disabled">
          <div class="suffix">
            {{ item.effEva06.percentage }}
          </div>
        </div>
      </li>
    </ul>
    <ul class="media-wrap" v-else>
      <li>
        <div class="item special">
          <div class="desc"></div>
        </div>
        <div class="item" v-for="(val,key,index) in datasForChildren[0]" :key="index">
          <div class="desc">{{ val.title1 }}</div>
          <div class="desc">{{ val.title2 }}</div>
        </div>
      </li>
      <li>
        <div class="item special">
          <div class="desc">权重系数</div>
        </div>
        <div class="item" v-for="(val,key,index) in datasForChildren[1]" :key="index">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="val.value" @change="changeValueForChild(key,$event)" :disabled="val.disabled">
        </div>
      </li>
      <li>
        <div class="item special">
          <div class="desc">换算指数</div>
        </div>
        <div class="item" v-for="(val,key,index) in datasForChildren[1]" :key="index">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="((val.value/datasForChildren[0][key].value*10).toFixed(1))" :disabled="true">
        </div>
      </li>
    </ul>

  </div>
</template>
<script>
import {getOrgList, getInfoForFormForEffEva,updateF03} from "@/services/system/whdngxlApi"
import moment from 'moment'

export default {
  name: 'effEvaSafeDetForm',
  components: {},
  data() {
    return {
      datasForParent: [{
        effEva01: {
          value: '权重占比',
        },
        effEva02: {
          value: '5',
          percentage: '%',
        },
        effEva03: {
          value: '30',
          percentage: '%',
        },
        effEva04: {
          value: '20',
          percentage: '%',
        },
        effEva05: {
          value: '20',
          percentage: '%',
        },
        effEva06: {
          value: '20',
          percentage: '%',
          disabled: true
        },
      },{
        effEva01: {
          value: '权重系数',
        },
        effEva02: {
          value: '0.5',
          percentage: '',
        },
        effEva03: {
          value: '3',
          percentage: '',
        },
        effEva04: {
          value: '2',
          percentage: '',
        },
        effEva05: {
          value: '2',
          percentage: '',
        },
        effEva06: {
          value: '2',
          percentage: '',
        },
      }],
      datasForChildren: [{
        effEva02: {
          title1: '检测覆盖度',
          title2: '<=0.5',
          value: '0.5',
        },
        effEva03: {
          title1: '巡查及时性',
          title2: '<=3.0',
          value: '3.0',
        },
        effEva04: {
          title1: '隐患处置及时性',
          title2: '<=3.0',
          value: '3.0',
        },
        effEva05: {
          title1: '办案打击力度',
          title2: '<=3.0',
          value: '3.0',
        },
        effEva06: {
          title1: '合计',
          title2: '<=1.5',
          value: '1.5',
        }
      },{
        effEva02: {
          value: '0.5',
        },
        effEva03: {
          value: '1.5',
        },
        effEva04: {
          value: '0.9',
        },
        effEva05: {
          value: '0.9',
        },
        effEva06: {
          value: '0.9',
        },
      }],
      orgList: [{
        dictKey: '330300000000',
        dictValue: '温州市'
      },{
        dictKey: '2',
        dictValue: '鹿城区'
      }],
      orgId: '330300000000'
    }
  },
  created() {
    this.$http.post(getOrgList, {}).then((res) => {
      this.orgList = res.result
      this.orgList.forEach(item =>{
        if(item.dictKey === '330300000000'){
          item.dictValue = '母值配置'
        }
      })
    })
  },
  mounted() {

  },
  methods: {
    initData(orgId){
      if(this.orgId === orgId){
        this.getInfoForFormForEffEva()
      }
      this.orgId = orgId

    },
    save() {
      const params = {}
      params.orgId= this.orgId
      if(this.orgId === '330300000000'){
        const data1 = this.datasForParent[0]
        const data2 = this.datasForParent[1]
        params.f0302 = data1.effEva02.value / 100
        params.f0303 = data2.effEva02.value
        params.f0304 = data1.effEva03.value / 100
        params.f0305 = data2.effEva03.value
        params.f0306 = data1.effEva04.value / 100
        params.f0307 = data2.effEva04.value
        params.f0308 = data1.effEva05.value / 100
        params.f0309 = data2.effEva05.value
      }else {
        const data = this.datasForChildren[1]
        const sum = data.effEva02.value + data.effEva03.value + data.effEva04.value + data.effEva05.value
        params.f0302 = data.effEva02.value / sum
        params.f0303 = data.effEva02.value
        params.f0304 = data.effEva03.value / sum
        params.f0305 = data.effEva03.value
        params.f0306 = data.effEva04.value / sum
        params.f0307 = data.effEva04.value
        params.f0308 = data.effEva05.value / sum
        params.f0309 = data.effEva05.value
      }
      this.$loading.show('正在处理数据,请等待...')
      this.$http.post(updateF03, params).then((res) => {
        this.$message.success("修改成功");
        this.getInfoForFormForEffEva()
        this.$loading.hide()
      }).catch((error) => {
        console.log(JSON.stringify(error))
        this.$loading.hide()
      })
    },
    changeValue(index,field,e){
      console.log(e.target._value)
      console.log(e.target.value)
      let sum = 0
      for (let datumKey in this.datasForParent[1]) {
        if(datumKey === 'effEva01' || datumKey === 'effEva06' || datumKey === field  || datumKey === 'effEva05'){
          continue
        }
        sum = sum + Number(this.datasForParent[1][datumKey].value)
      }
      if(index === 0){
        sum = sum + Number(e.target.value / 100 * this.datasForParent[1].effEva06.value)
        if(sum  > this.datasForParent[1].effEva06.value){
          this.datasForParent[0][field].value = e.target._value
          this.$set(this.datasForParent,0, this.datasForParent[0])
          return
        }
        this.datasForParent[0][field].value = e.target.value
        this.datasForParent[1][field].value = Math.round(e.target.value * this.datasForParent[1].effEva06.value)/ 100

        this.datasForParent[1]['effEva05'].value = Math.round((this.datasForParent[1].effEva06.value - sum) * 100) / 100
        this.datasForParent[0]['effEva05'].value = Math.round(this.datasForParent[1]['effEva05'].value / this.datasForParent[1].effEva06.value * 100)
      }else if(index === 1){
        sum = sum + Number(e.target.value)
        if(sum > this.datasForParent[1].effEva06.value){
          this.datasForParent[1][field].value = e.target._value
          this.$set(this.datasForParent,1, this.datasForParent[1])
          return
        }
        this.datasForParent[1][field].value = e.target.value
        this.datasForParent[0][field].value = Math.round(e.target.value / this.datasForParent[1].effEva06.value * 100)

        this.datasForParent[1]['effEva05'].value = Math.round((this.datasForParent[1].effEva06.value - sum) * 100) / 100
        this.datasForParent[0]['effEva05'].value = Math.round(this.datasForParent[1]['effEva05'].value / this.datasForParent[1].effEva06.value * 100)
      }
    },
    changeValueForChild(key,event){
      let sum = 0;
      for (let datasForChildKey in this.datasForChildren[1]) {
        if(datasForChildKey === 'effEva06' || datasForChildKey === key) continue;
        sum = sum + Number(this.datasForChildren[1][datasForChildKey].value)
      }
      if(Number(event.target.value) > Number(this.datasForChildren[0][key].value)){
        this.datasForChildren[1][key].value = event.target._value
      }else {
        sum = sum + Number(event.target.value)
        if(sum > Number(this.datasForChildren[0]['effEva06'].value)){
          this.datasForChildren[1][key].value = event.target._value
        }else {
          this.datasForChildren[1][key].value = Number(event.target.value)
          this.datasForChildren[1]['effEva06'].value = sum
        }
      }
      this.$set(this.datasForChildren,1, this.datasForChildren[1])
    },
    getInfoForFormForEffEva() {
      this.$http.post(getInfoForFormForEffEva, {orgId: this.orgId}).then((res) => {
        if(this.orgId === '330300000000'){
          this.datasForParent = res.result
          console.log(this.datasForParent)
        }else {
          this.datasForChildren = res.result
        }
      })
    }
  },
  watch: {
    orgId(){
      this.getInfoForFormForEffEva()
    }
  }
}
</script>
<style lang="less" scoped>
.operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;

  > div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }


}
.media-wrap {
  margin-top: 15px;

  li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;

    .item {
      flex: 0 0 auto;
      width: 15%;

      .desc {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .div-input {
        width: 80%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: visible;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
      }

      /* 输入框为空时显示 placeholder */
      .div-input:empty:before {
        content: attr(placeholder);
        color: red;
      }
      /* 输入框获取焦点时移除 placeholder */
      .div-input:focus:before {
        content: none;
      }

      .suffix {
        display: inline-block;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      p {
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.special {
          display: inline-block;
          width: 80%;
          overflow: visible;
        }
      }

      .btn-wrap {
        text-align: center;
      }


      &.special {
        width: 10%;
      }
    }
  }
}
</style>